//
//  MineView.swift
//  casdon_swiftUI
//
//  Created by ww on 2025/4/15.
//

import SwiftUI
import FlowStacks

struct MineView: View {
    @EnvironmentObject var navigator: FlowNavigator<MineStack>
    @StateObject var viewModel = MineViewModel()
    var body: some View {
        ZStack(alignment: .top) {
            VStack{
                NavigationBar(title: "", isBackBtnVisible: false, trailing: AnyView(
                    Button(action: {
                        navigator.push(.message)
                    }) {
                        Image("message")
                    }
                ))
                
                ScrollView {
                    VStack(spacing: 0) {
                        UserInfoView(viewModel: viewModel)
                            .padding(.top, 16)
                        IntegralCenterView(integral: viewModel.integralCount)
                            .padding(.horizontal, 16)
                            .padding(.top, 16)
                        MineListView()
                            .padding(.top, 16)
                        Spacer()
                    }
                }
            }
           
        }.background(
            Image("home_bg")
                .resizable()
                .edgesIgnoringSafeArea(.all)
        )
    }
}



struct MineListView: View {
    @EnvironmentObject var navigator: FlowNavigator<MineStack>
    var stackKey: String?
    var body: some View {
        VStack(spacing: 0) {
            MineListItem(icon: "ic_record", title: LocalizedStringKey("explore record")){
                navigator.push(.exploreRecord)
            }
                .padding(.top, 10)
            MineListItem(icon: "ic_service_center", title: LocalizedStringKey("service center")){
                navigator.push(.serviceCenter)
            }
                .padding(.top, 10)
            MineListItem(icon: "ic_setting", title: LocalizedStringKey("setting")){
                navigator.push(.mineSetting)
            }
                .padding(.top, 10)
        }
        .padding(.horizontal, 12)
        .padding(.top, 18)
    }
}

struct MineListItem: View {
    let icon: String
    let title: LocalizedStringKey
    let onTap: () -> Void
    var body: some View {
        Button(action: {
            onTap()
        }) {
            HStack {
                ZStack {
                    Image(icon)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 18, height: 18)
                }
                Text(title)
                    .font(.system(size: 16))
                    .foregroundColor(AppColors.Gy1)
                    .padding(.leading, 12)
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(Color(red: 0.82, green: 0.82, blue: 0.89))
            }
            .padding(.horizontal, 12)
            .frame(height: 66)
            .background(AppColors.White1)
            .cornerRadius(8)
        }
    }
}

struct UserInfoView: View {
    @ObservedObject var viewModel: MineViewModel
    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            HStack(alignment: .center, spacing: 16) {
                ZStack {
                    Circle()
                        .fill(Color(red: 0.93, green: 0.94, blue: 0.97))
                        .frame(width: 72, height: 72)
                    Circle()
                        .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))
                        .foregroundColor(Color(red: 0.85, green: 0.85, blue: 0.92))
                        .frame(width: 72, height: 72)
                    Image("headerplace")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 56, height: 56)
                        .clipShape(Circle())
                }
                VStack(alignment: .leading, spacing: 6) {
                    Text("凯度生活家")
                        .font(.system(size: 22, weight: .bold))
                        .foregroundColor(Color(red: 0.16, green: 0.16, blue: 0.22))
                }
                Spacer()
            }
            .padding(.top, 8)
            .padding(.horizontal, 20)
            
            HStack(spacing: 0) {
                VStack(alignment: .center) {
                    Text(viewModel.colectCookBookCount)
                        .font(.system(size: 24))
                        .bold()
                        .foregroundColor(AppColors.Gy1)
                    Text("收藏菜谱")
                        .font(.system(size: 14))
                        .foregroundColor(AppColors.Gy3)
                        .padding(.top, 4)
                }.frame(maxWidth: .infinity)
                
                VStack(alignment: .center) {
                    Text(viewModel.orderCount)
                        .font(.system(size: 24))
                        .bold()
                        .foregroundColor(AppColors.Gy1)
                    Text("订单")
                        .font(.system(size: 14))
                        .foregroundColor(AppColors.Gy3)
                        .padding(.top, 4)
                }.frame(maxWidth: .infinity)
                
                VStack(alignment: .center) {
                    Text(viewModel.integralCount)
                        .font(.system(size: 24))
                        .bold()
                        .foregroundColor(AppColors.Gy1)
                    Text("积分")
                        .font(.system(size: 14))
                        .foregroundColor(AppColors.Gy3)
                        .padding(.top, 4)
                }.frame(maxWidth: .infinity)
            }
            .padding(.horizontal, 16)
        }
    }
}

struct IntegralCenterView : View {
    let integral: String
    var body: some View {
        Button(action: {
            // Handle integral center tap
        }) {
            ZStack {
                RoundedRectangle(cornerRadius: 14)
                    .fill(LinearGradient(gradient: Gradient(colors: [Color(red: 0.23, green: 0.22, blue: 0.44), Color(red: 0.36, green: 0.33, blue: 0.67)]), startPoint: .topLeading, endPoint: .bottomTrailing))
                    .shadow(color: Color.black.opacity(0.08), radius: 8, x: 0, y: 2)
                HStack {
                    VStack(alignment: .leading, spacing: 4) {
                        Text("积分中心")
                            .font(.system(size: 16, weight: .medium))
                            .foregroundColor(.white)
                        Text("赚取积分和兑换商品")
                            .font(.system(size: 13))
                            .foregroundColor(Color.white.opacity(0.7))
                    }
                    Spacer()
                    HStack(spacing: 0) {
                        Text("0积分")
                            .font(.system(size: 15, weight: .bold))
                            .foregroundColor(Color(red: 0.49, green: 0.46, blue: 0.99))
                            .padding(.horizontal, 16)
                            .padding(.vertical, 6)
                            .background(Color.white)
                            .cornerRadius(16)
                    }
                }
                .padding(.horizontal, 16)
            }
            .frame(height: 60)
        }
        .padding(.top, 4)
    }
}
